<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jiangcheng is using runoob.com</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<style>
#app {
  border: dashed black 1px;
  display: inline-block;
  padding-bottom: 10px;
}

#app > button {
  display: block;
  margin: auto;
}

#lightDiv {
  position: relative;
  width: 150px;
  height: 150px;
}

#lightDiv > img {
  position: relative;
  width: 100%;
  height: 100%;
}

#lightDiv > div {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background-color: yellow;
}

.active {
    width: 150px;
    height: 100px;
    background: green;
}
.text-danger {
	background: red;
}

.static {
	width: 150px;
	height: 100px;
}
</style>
</head>
<body>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="https://static.runoob.com/images/svg/img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开/关</button>

  <div :class="{'active':isActive}"></div>

  <div class="static" :class="{'active':isActive,'text-danger':hasErr}"></div>

  <div class="static" :class="ClassObject"></div>

  <div class="static" :class="classObject"></div>

  <div class="static" :class="[activeClass, errorClass]"></div>

  <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>

  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

  <div :style="styleObject">菜鸟教程</div>

  <div :style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>




<script>
const app = Vue.createApp({
  data() {
    return {
      lightOn: false,
      isActive:true,
      hasErr:true,
      ClassObject:{
        'active': false,
            'text-danger': true      
      },
      error:null,
      activeClass: 'active',
        errorClass: 'text-danger',
        activeColor: 'yellow',
        fontSize: 30,
        styleObject: {
            color: "red",
            fontSize: "30px"
        },
        baseStyles: {
                color: 'green',
                fontSize: '30px'
            },
	        overridingStyles: {
                'font-weight': 'bold'
            }
    }
  },
  computed:{
    classObject(){
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type === 'fatal'
        }
    }
  }
})
app.mount('#app')
</script>

</body>
</html>